<template>
  <div class="question-preview">
    <el-dialog
      title="题目预览"
      :visible.sync="questionDialogVisible"
      width="50%"
      @close="videoVisible = false"
    >
      <!-- 表单主体部分 -->
      <el-form ref="questionPreviewForm" :model="questionList">
        <el-row>
          <el-col :span="6">
            <el-form-item label="【题型】 : ">
              <span>
                {{
                  questionList.questionType |toQuestionType
                }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【编号】 : ">
              <span>{{ questionList.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【难度】 : ">
              <span>{{
                questionList.difficulty | toDifficulty
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【标签】 : ">
              <span>{{ questionList.tags }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="【学科】 : ">
              <span>{{ questionList.subjectName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【目录】 : ">
              <span>{{ questionList.directoryName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【方向】 : ">
              <span>{{ questionList.direction }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col>
            <el-form-item label="【题干】 : ">
              <br />
              <div v-html="questionList.question" class="questionMain"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <span
                >{{
                  questionList.questionType | toQuestionType
                }}题 选项:(以下选中的选项为正确答案)</span
              >
            </el-form-item>
            <!-- 1. 单选 -->
            <el-form-item v-if="questionList.questionType === '1'">
              <el-radio-group v-model="radioCurrent">
                <el-radio
                  :label="item"
                  :disabled="!item.isRight"
                  :value="item.code"
                  v-for="item in questionList.options"
                  :key="item.id"
                  >{{ item.title }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- 2. 多选 -->
            <el-form-item v-else-if="questionList.questionType === '2'">
              <el-checkbox-group v-model="checkboxCurrent">
                <el-checkbox
                  :label="item"
                  :disabled="!item.isRight"
                  :value="item.code"
                  v-for="item in questionList.options"
                  :key="item.id"
                  >{{ item.title }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <!-- 3. 简答 -->
            <el-form-item v-else>
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col>
            <el-form-item label="【参考答案】 : ">
              <el-button type="danger" @click="videoVisible = true"
                >视频答案预览</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <!-- 视频答案 -->
            <video
              v-if="videoVisible"
              class="videoBox"
              controls
              autoplay
            >
            <source  :src="questionList.videoURL" type="video/mp4">
            您的浏览器不支持 video 标签。
            </video>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col>
            <el-form-item label="【答案解析】 : ">
              <span v-html="questionList.answer" class="answerKey"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col>
            <el-form-item label="【题目备注】 : ">
              <span v-html="questionList.remarks"></span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="questionDialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionPreview',
  components: {},
  props: {
    questionList: {
      type: [Object, Array],
      required: true
    },
    radioCurrent: {
      type: Object
    },
    checkboxCurrent: {
      type: Array
    }
  },
  data () {
    return {
      questionDialogVisible: false,
      videoVisible: false

    }
  },
  created () {
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV () {
      this.questionDialogVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.questionDialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item {
  margin: 0;
}
.questionMain {
  color: blue;
  /deep/p {
    margin: 0;
  }
}
.el-radio,
.el-checkbox {
  display: block;
}
.el-radio {
  margin: 10px 0;
}

.answerKey {
  /deep/p {
    margin: 0;
  }
}
.videoBox {
  margin: 30px 0;
  width: 280px;
}
</style>
